import React, {Component} from 'react';
import './SearchMusicList.css';

class SearchMusicList extends Component {
	render() {
		return (
			<ul className='searchMusicList'>
				{this.props.songs.map((item, index) => {
					return (
						<div className='item' key={item.id}>
							{item.ar ? <div className="index">{index + 1}</div> : null}

							<li className='li'>
								<div className="name">{item.name}</div>

								{
									item.artists ? (
											<div className="singer">
												{item.artists ? item.artists.map((v, i) => <span key={v.id}>{v.name}{item.artists.length === i + 1 ? '' : '/'}</span>) : null} - {item.album ? item.album.name : null}
											</div>
										)
										:
										(
											<div className="singer">
												{item.ar ? item.ar.map((v, i) => <span key={v.id}>{v.name}{item.ar.length === i + 1 ? '' : '/'}</span>) : null} - {item.al ? item.al.name : null}
											</div>
										)
								}
							</li>
						</div>

					)
				})}

			</ul>
		);
	}
}

export default SearchMusicList;